<template>
  <div class="quxian"></div>
</template>

<script>
export default {
  mounted() {
    this.getEchartData();
  },
  methods: {
    getEchartData() {
      // for (let i = 0; i < this.total.length; i++) {
      //   }
      const chart = document.querySelector(".quxian");

      // console.log(chart);
      if (chart) {
        const myChart = this.$echarts.init(chart);
        const option = {
          // 提示
          tooltip: {
            trigger: "axis",
            transitionDuration: 0,
          },
          
          legend: {
            data: ["无星", "三星", "四星", "五星"],
             itemHeight: "10",
            itemWidtt: "10",
            icon: "circle",
          },
          xAxis: {
            type: "category",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
          },
          color: ["#F6BD16", "#5AD8A6", "#5B8FF9", "#5D7092"],

          yAxis: {
            type: "value",
          },
          series: [
            {
              data: [20, 25, 28, 30, 26, 24, 20, 16, 14, 10, 14, 16],
              name: "三星",
              type: "line",
              smooth: true,
            },
            {
              data: [5, 10, 14, 10, 15, 18, 24, 35, 25, 16, 25, 12],
              name: "四星",
              type: "line",
              smooth: true,
            },
            {
              data: [15, 16, 17, 18, 6, 18, 14, 12, 10, 15, 18, 20],
              name: "五星",
              type: "line",
              smooth: true,
            },
            {
              data: [5, 10, 14, 10, 25, 18, 19, 35, 25, 26, 20, 12],
              type: "line",
              name: "无星",
              smooth: true,
            },
          ],
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      }
      this.$on("hook:destroyed", () => {
        window.removeEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.quxian {
  overflow: hidden;
  width: 650px;
  height: 290px;
}
</style>